Bootstrap Snippet Parallax Effect Header using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
            <img id="bg" src="https://lethal-wilderness.surge.sh/parallax-images/bg.jpg" />
            <h2 id="text">Mountains</h2>
            <img id="man" src="https://lethal-wilderness.surge.sh/parallax-images/man.png" />
            <img id="clouds_1" src="https://lethal-wilderness.surge.sh/parallax-images/clouds_1.png" />
            <img id="clouds_2" src="https://lethal-wilderness.surge.sh/parallax-images/clouds_2.png" />
            <img id="mountain_left" src="https://lethal-wilderness.surge.sh/parallax-images/mountain_left.png" />
            <img id="mountain_right" src="https://lethal-wilderness.surge.sh/parallax-images/mountain_right.png" />
        </section>
        <div class="sec">
            <h2>ScrollTrigger</h2>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam, impedit veritatis. Iste maxime nihil enim esse eum sint molestiae quam
                doloribus ea ipsa consectetur corporis harum nemo, quia explicabo, tenetur ipsum atque? Minima necessitatibus nam earum, maxime iure
                quod pariatur tenetur animi quos ut nesciunt ea adipisci non reprehenderit distinctio, obcaecati in blanditiis totam voluptatem,
                veniam explicabo ad odio itaque quae. Velit, debitis praesentium obcaecati similique quo, aspernatur eum consequuntur, repellendus
                distinctio officiis enim minima suscipit quisquam unde. Aut maiores dolorum ab provident molestias beatae, autem neque totam impedit
                voluptatum, perspiciatis optio nisi quae eaque, temporibus incidunt veniam saepe obcaecati id. Corrupti suscipit eveniet facere
                laboriosam, veritatis est omnis iste placeat consectetur, eaque soluta assumenda dicta ea possimus incidunt consequatur ullam, et
                nulla unde? Excepturi et impedit ut laborum labore harum, dicta nam fugit, earum deserunt eaque quidem. Dolorem beatae magnam commodi,
                laborum dignissimos tenetur dolor eaque id nihil officiis impedit aspernatur a error iure! Aspernatur doloribus qui aut assumenda
                fugiat dolorem aliquid sapiente harum hic deserunt. Corrupti esse consequuntur dolorum eos cum sunt? Nemo facere ipsum hic id
                consequatur soluta facilis! Consectetur minus odio dolor numquam eos ex. Aliquam distinctio velit minima incidunt facilis, ratione
                amet neque vero sed maxime hic accusamus! Sed earum dolore quia consequatur debitis architecto nihil quod incidunt ad, quos accusamus
                libero eaque, inventore officia iusto porro saepe sit enim. Totam incidunt excepturi repudiandae nostrum optio dignissimos expedita!
                Necessitatibus, quae tempora saepe assumenda aspernatur autem maiores exercitationem accusamus a quaerat corporis illo modi veritatis
                veniam distinctio et ducimus quas! Nesciunt, non voluptatem aspernatur quae quaerat nostrum porro ipsa aperiam id, culpa illum? Veniam
                asperiores dolore dolorem velit alias recusandae minus neque aut aspernatur minima nam numquam est ducimus dignissimos possimus magnam
                fuga beatae quam quaerat illo dolorum non, iste mollitia! Perspiciatis animi a iure in.
                <br />
                <br />
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #fff, transparent);
    z-index: 2;
}
section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Parallax Effect Header"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Parallax Effect Header" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Parallax Effect Header"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY